<!-- 热销商品图表(饼图) -->
<template>
  <div class="com-container">
    <div class="com-chart" ref="hotRef"></div>
    <span class="iconfont arr-left" @click="toLeft" :style="comStyle">&#xe6ef;</span>
    <span class="iconfont arr-right" @click="toRight" :style="comStyle">&#xe6ed;</span>
    <span class="cat-name" :style="comStyle">{{catName}}</span>
  </div>
</template>

<script>
import {mapState} from 'vuex'
import { getThemeValue } from '@/utils/theme_utils'
export default {
  name: 'Hot',
  data() {
    return {
      chartInstance: null,  //echarts实例对象
      allData: [],  // 服务器返回的数据
      currentIndex: 0,  // 当前所展示的一级分类数据
      timerId: null, // 定时器标识
      titleFontSize: 0
    }
  },
  //hotproduct
  created() {
    // 在组件创建完成之后 进行回调函数的注册
    this.$socket.registerCallback('hotData', this.getData)
  },
  mounted() {
    this.initEcharts()

    // this.getData()
    this.$socket.send({  // 发送数据给服务器,告诉服务器,我现在需要数据
      action: 'getData',
      socketType: 'hotData',
      chartName: 'hotproduct',
      value: ''
    })

    this.screenAdapter()  // 在页面加载完成的时候, 主动进行屏幕的适配
    window.addEventListener('resize', this.screenAdapter)
  },
  destroyed() {
    clearInterval(this.timerId)
    this.timerId = null
    // 在组件销毁的时候, 需要将监听器取消掉
    window.removeEventListener('resize', this.screenAdapter)

    // 在组件销毁的时候, 进行回调函数的取消
    this.$socket.unRegisterCallback('hotData')
  },
  computed: {
    catName() {
      if(this.allData.length === 0){
        return ''
      } else{
        return this.allData[this.currentIndex].name
      }
    },
    comStyle() {
      return {
        fontSize: this.titleFontSize + 'px',
        color: getThemeValue(this.theme).titleColor
      }
    },
    ...mapState(['theme'])
  },
  watch: {
    theme() {
      // console.log('主题切换了')
      this.chartInstance.dispose()  // 销毁当前的图表
      this.initEcharts() // 重新以最新的主题名称初始化图表对象
      this.screenAdapter() // 完成屏幕的适配
      this.updateChart() // 更新图表的展示
    }
  },
  methods: {
    // 初始化echartsInstance对象
    initEcharts() {
      // this.chartInstance = this.$echarts.init(this.$refs.hotRef, 'chalk')  // 'chalk'主题
      this.chartInstance = this.$echarts.init(this.$refs.hotRef, this.theme)

      // 对图表初始化配置的控制
      const initOption = {
        title: {
          text: '▎ 热销商品的占比',
          left: 20,
          top: 20
        },
        legend: {  // 图例
          top: '15%',
          icon: 'circle'
        },
        tooltip: {  // 工具提示框的配置
          show: true,
          formatter: arg=>{
            // console.log(arg)
            const thirdCategory = arg.data.children
            // 计算出所有三级分类的数值总和
            let total = 0
            thirdCategory.forEach(item=>{
              total += item.value
            })
            let retStr= arg.name + ': ' + arg.value + '<br/>'
            thirdCategory.forEach(item=>{
              retStr += `${item.name}: ${parseInt(item.value/total*100) + '%'} <br/>`
            })
            return retStr
          }
        },
        series: [
          {
            type: 'pie',
            label: {
              show: false, // 不直接显示标签名
            },
            emphasis: {  // 在高亮状态(鼠标移入或点击时)显示标签名
              label: {
                show: true
              },
              labelLine: {
                show: false
              }
            }
          }
        ]
      }
      this.chartInstance.setOption(initOption)
    },

    // 获取服务器的数据
    /*async getData() {
      const { data: ret } = await this.$http.get('hotproduct')
      // console.log(ret)
      this.allData = ret
      this.updateChart()
    },*/
    getData(ret) {
      // console.log(ret)
      this.allData = ret
      this.updateChart()
    },

    // 更新图表
    updateChart() {
      const legendData = this.allData[this.currentIndex].children.map(item=>{
        return item.name
      })
      const seriesData = this.allData[this.currentIndex].children.map(item=>{
        return {
          name: item.name,
          value: item.value,
          children: item.children // 新增加children的原因是为了在tooltip中的formatter的回调函数中,来拿到这个二级分类下的三级分类数据
        }
      })
      // 和数据相关的配置项
      const dataOption = {
        legend: {  // 图例的配置
          data: legendData
        },
        series: [
          {
            data: seriesData
          }
        ]
      }
      this.chartInstance.setOption(dataOption)
    },

    // 定时器：每隔三秒获取下一页数据  --动态刷新图表
    startInterval() {
      if(this.timerId) {
        clearInterval(this.timerId)
        this.timerId = null
      }
      this.timerId = setInterval(()=>{
        this.currentPage++
        if(this.currentPage > this.totalPage){
          this.currentPage = 1
        }
        this.updateChart()
      }, 3000)
    },

    // 屏幕适配: 当浏览器的大小发生变化时调用的方法,来完成屏幕的适配
    screenAdapter() {
      this.titleFontSize = this.$refs.hotRef.offsetWidth / 100 * 3.6
      // 和分辨率大小相关的配置项
      const adapterOption = {
        title: {  //图表标题的配置
          textStyle: {
            fontSize: this.titleFontSize
          }
        },
        legend: {  // 图例的配置
          // itemWidth: this.titleFontSize/2,
          // itemHeight: this.titleFontSize/2,
          itemWidth: this.titleFontSize,
          itemHeight: this.titleFontSize,
          itemGap: this.titleFontSize/2,
          textStyle: {
            fontSize: this.titleFontSize / 2
          }
        },
        series: [
          {
            radius: this.titleFontSize * 4.5,  // 饼图的大小
            center: ['50%', '50%']
          }
        ]
      }
      this.chartInstance.setOption(adapterOption)
      this.chartInstance.resize()  // 手动的调用图表对象的resize 才能产生效果
    },


    // 点击向左按钮
    toLeft() {
      this.currentIndex--
      if(this.currentIndex<0){
        this.currentIndex= this.allData.length-1
      }
      this.updateChart()
    },
    // 点击向右按钮
    toRight() {
      this.currentIndex++
      if(this.currentIndex>this.allData.length-1){
        this.currentIndex= 0
      }
      this.updateChart()
    }
  }
}
</script>

<style lang="less" scoped>
  .arr-left {
    position: absolute;
    left: 10%;
    top: 50%;
    z-index: 10;
    transform: translateY(-50%);
    cursor: pointer;
    color: white;
  }
  .arr-right {
    position: absolute;
    right: 10%;
    top: 50%;
    z-index: 10;
    transform: translateY(-50%);
    cursor: pointer;
    color: white;
  }
  .cat-name {
    position: absolute;
    left: 80%;
    bottom: 10%;
    color: white;
  }
</style>
